<!--场地预约管理-->
<script setup lang="ts">
const aaa=ref(false)
const bbb=ref(false)
const ccc=ref(false)
const ddd=ref(false)
const eee=ref(false)
const ww=ref(false)
const z=ref(false)
const say=(msg)=>{
  ElMessage.success("预约成功")
  // ElMessage.error("预约失败")
  // ElMessage.info(msg)
}
const backq=()=>{
  location.reload();
}

</script>

<template >
  <div id="app1" class="my-div">

    <div id="aa">
      <el-row id="bb">
        <el-button @click="aaa=!aaa" type="primary">查看场地信息</el-button>
        <el-button @click="ww=!ww" type="success">查看预约信息</el-button>
        <el-button @click="z=!z" type="info">预约须知</el-button>
        <el-button type="warning" @click="backq()">刷新页面</el-button>
      </el-row>
    </div >
    <br>
    <div id="input1" class="aaa" v-if="aaa">
      <el-row>
        <el-col :span="6" id="qq"><div class="grid-content ">
          <div >运动</div>
          <el-button @click="bbb=!bbb" type="primary">羽毛球</el-button>
          <el-button @click="ccc=!ccc" type="success">篮球</el-button>
          <el-button @click="ddd=!ddd" type="info">足球</el-button>
          <el-button @click="eee=!eee" type="warning">排球</el-button>
        </div></el-col>
        <el-col :span="6" id="qq"><div class="grid-content bg-purple-light">
          <div>地点</div>
          <el-button type="primary">羽毛球馆</el-button>
          <el-button type="success">篮球馆</el-button>
          <el-button type="info">足球场</el-button>
          <el-button type="warning">排球馆</el-button>
        </div></el-col>
        <el-col :span="6"id="qq"><div class="grid-content ">
          <div>场地类型</div>
          <el-button type="primary">查看场地信息</el-button>
          <el-button type="success">查看预约信息</el-button>
          <el-button type="info">信息按钮</el-button>
          <el-button type="warning">返回首页</el-button>
        </div></el-col>
        <el-col :span="6"id="qq"><div class="grid-content bg-purple-light">
          <div>规则</div>
          <el-button type="primary">禁止吸烟</el-button>
          <el-button type="success">禁止吸烟</el-button>
          <el-button type="info">禁止吸烟</el-button>
          <el-button type="warning">禁止吸烟</el-button>
        </div></el-col>
      </el-row>
      </div>
      <div id="qqqq">
        <div v-if="bbb">
          羽毛球：<div>
            <form>
              <label for="checkbox1">
                <input type="checkbox" id="checkbox1" name="checkbox1" value="option1">
                第一场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第二场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第三场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第四场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第五场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第六场
              </label>
            </form>
          </div>
        </div>
        <div v-if="ccc">
          篮球：<div>
            <form>
              <label for="checkbox1">
                <input type="checkbox" id="checkbox1" name="checkbox1" value="option1">
                第一场
              </label>

              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第二场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第三场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第四场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第五场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第六场
              </label>
            </form>
          </div>
        </div>
        <div v-if="ddd">
          足球：<div>
            <form>
              <label for="checkbox1">
                <input type="checkbox" id="checkbox1" name="checkbox1" value="option1">
                第一场
              </label>

              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第二场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第三场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第四场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第五场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第六场
              </label>
            </form>
          </div>
        </div>
        <div v-if="eee">
          排球：<div>
            <form>
              <label for="checkbox1">
                <input type="checkbox" id="checkbox1" name="checkbox1" value="option1">
                第一场
              </label>

              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第二场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第三场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第四场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第五场
              </label>
              <label for="checkbox2">
                <input type="checkbox" id="checkbox2" name="checkbox2" value="option2">
                第六场
              </label>
            </form>
          </div>
        </div>
      </div>
    <div style="text-align: center">
      <button @click="say('ee')" text-alien="center" class="pretty-button">预约</button>
    </div>
    <div v-if="ww" id="w">
      <table>
        <thead>
        <tr>
          <th>姓名</th>
          <th>预约场地</th>
          <th>预约时间</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>张三</td>
          <td>羽毛球场</td>
          <td>14.00-18.00</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>足球场</td>
          <td>14.00-18.00</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>篮球场</td>
          <td>14.00-18.00</td>
        </tr>
        <!-- 更多的行和数据 -->
        </tbody>
      </table>
    </div>
    <div v-if="z" style="color:white;">入场要求：

      所有人员凭有效证件方可入场，并在入场前进行身份核验。
      未满18周岁的未成年人需在父母或法定监护人的陪同下方可入场，并需签署免责声明。
      患有传染病或医生明确禁止运动的人员禁止入场。</div>
  </div>

</template>

<style scoped lang="scss" >
#app1{
  color: black;
  height: 100vh;
  #aa{
    border-radius: 30px;
    #bb {

      display: grid;
      gap: 20px;
      grid-template-columns: 1fr 1fr;
      button {
        height: 100px;
      }
    }
  }
  #input1{
    border-radius: 20px;
    font-size: 25px;
    #qq button{
      margin-left: 0px;
      width: 100%;
    }
  }
}
/* 添加样式来美化按钮 */
.pretty-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #4CAF50; /* 绿色背景 */
  border: none;
  border-radius: 4px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停时变为小手图标 */
  transition: background-color 0.3s ease; /* 过渡效果 */
}
.pretty-button:hover {
  background-color: #45a049; /* 悬停时背景色变暗 */
}

.my-div {
  /* 设置背景图片 */
  background-image: url('img.png');
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 其他可选的样式属性 */
  //width: 500px; /* 设置div的宽度 */
  //height: 300px; /* 设置div的高度 */
  background-repeat: no-repeat; /* 图片不重复 */
  background-size: cover; /* 图片覆盖整个div，可能会被裁剪 */
  /* 或者使用 background-position: center center; 来居中图片 */
}
#qqqq{
  background: white;
}
#w{
  background: white;
}
table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 表格宽度为100% */
}
th, td {
  border: 1px solid black; /* 添加边框 */
  padding: 8px; /* 单元格内边距 */
  text-align: left; /* 文本左对齐 */
}
th {
  background-color: #f2f2f2; /* 表头背景色 */
}
</style>
